
<template>
  <div>
    <div @click ="aaaa">{{$t('demo.s')}}</div>
    <ejs-gantt ref='gantt'
               :dataSource="data"
               id="GanttContainer"
               :taskFields="taskFields"
               :height="height"
               :renderBaseline="renderBaseline"
               :treeColumnIndex='1'
               :baselineColor="baselineColor"
               :tooltipSettings="tooltipSettings"></ejs-gantt>
  </div>
</template>
<script>

export default {
  data: function () {
    return {
      data: [
        {
          TaskID: 8,
          TaskName: 'Estimation approval',
          StartDate: new Date('04/02/2019'),
          Duration: 0,
          Progress: 50,
          Indicators: [
            {
              'date': '04/10/2019',
              'name': '23',
              'tooltip': 'Design phase completed',
              'iconClass': 'red'
            },
            {
              'date': '04/13/2019',
              'name': '40',
              'tooltip': 'Design phase completed',
              'iconClass': 'green'
            }
          ]
        },
        {
          TaskID: 5,
          TaskName: 'Project Estimation',
          StartDate: new Date('04/02/2019'),
          EndDate: new Date('04/21/2019'),
          subtasks: [
            {
              TaskID: 6,
              TaskName: 'Develop floor plan for estimation',
              StartDate: new Date('04/04/2019'),
              Duration: 3,
              Progress: 50
            },
            {
              TaskID: 7,
              TaskName: 'List materials',
              StartDate: new Date('04/04/2019'),
              Duration: 3,
              Progress: 50
            }

          ]
        }
      ],
      taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        baselineStartDate: 'BaselineStartDate',
        baselineEndDate: 'BaselineEndDate',
        progress: 'Progress',
        dependency: 'Predecessor',
        child: 'subtasks',
        indicators: 'Indicators'
      },
      renderBaseline: true,
      baselineColor: 'red',
      tooltipSettings: {
        showTooltip: true
      },
      height: '450px'
    }
  },

  methods: {
    aaaa () {
      document.getElementsByClassName('red')[0].parentElement.classList.add('red-mark')
      document.getElementsByClassName('green')[0].parentElement.classList.add('green-mark')
    }
  }
}
</script>
<style >
.red-mark {
background-color:red;
margin: 0px !important;
width: 32px;
text-align: center;
}
.green-mark {
background-color:green;
margin: 0px !important;
width: 32px;
text-align: center;
}
</style>
